<template>
	<view class="container">
		<view class="" style="height: 100rpx;">
			<u-navbar leftText="返回" title="我的证书"  @leftClick="back" @rightClick="gohistory">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" size="19"></u-icon>
				</view>
				<view class="u-nav-slot" slot="right">
					<text style="color: #1989FA;">编辑</text>
				</view>
			</u-navbar>
		</view>

		<view>
			<u--form labelPosition="left" :model="form" ref="form" labelWidth='90px' :labelStyle='labelStyle'>
				<view class="title">
					基础信息
				</view>
				<view class="box">
					<u-form-item label="证书名称" prop="zsmc" borderBottom>
						<u--input v-model="form.zsmc" placeholder="输入证书名称" disabled disabledColor="#ffffff"  border="none"></u--input>
					</u-form-item>
					<u-form-item label="证书编号" prop="zsbh" borderBottom>
						<u--input v-model="form.zsbh" placeholder="输入证书编号" disabled disabledColor="#ffffff"  border="none"></u--input>
					</u-form-item>
					<u-form-item label="证书类型" prop="zslx" borderBottom>
						<u--input v-model="form.zslx" placeholder="输入证书类型" disabled disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>
					<u-form-item label="有效日期" prop="yxrq" borderBottom>
						<u--input v-model="form.yxrq" placeholder="请选择日期"  disabledColor="#ffffff" disabled
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="发证机构" prop="fzjg" borderBottom>
						<u--input v-model="form.fzjg" placeholder="输入发证机构" disabled disabledColor="#ffffff"  border="none"></u--input>
					</u-form-item>
					<u-form-item label="添加证书照片" borderBottom>
						<image style="width: 200rpx;height: 200rpx;" :src="form.xgfj" mode=""></image>

					</u-form-item>
					<u-form-item label="" prop="zsms" borderBottom>
						<view class="textarea">
							<text class="one">证书描述</text>
							<view class="tarea">
								<textarea disabled disabledColor="#ffffff" 
									style="background-color: #F6F6F6;color: #666666;font-size: 28rpx;border-radius: 8rpx; padding: 24rpx;"
									v-model="form.zsms" placeholder="请输入……" rows="3"></textarea>
							</view>
						</view>
					</u-form-item>
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		detail
	} from '@/api/certificate'
	import {
		URL
	} from '@/api/request.js'
	export default {
		data() {
			return {
				labelStyle: {
					color: '#666'
				},
				form: {
					xgfj: '',
					yxrq: '',
					zsmc: '',
					zsbh: '',
					zslx: '',
					zsms: '',
					fzjg: ''
				},
				id: ''

			};
		},
		onLoad(option) {
			console.log(option.id)
			this.id = option.id
		},
		onShow() {
			detail({id:this.id}).then(res=>{
				this.form=res.data
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			gohistory() {
				uni.navigateTo({
					url: `/pages/editcertificate/editcertificate?id=${this.id}`
				})

			},
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		padding: 0 24rpx;
		background-color: #f6f6f6;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			line-height: 44rpx;
			padding: 20rpx 48rpx;
		}

		.box {
			padding: 0rpx 48rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.textarea {
			.one {
				font-size: 28rpx;
				color: #999999;
			}

			.tarea {
				margin-top: 16rpx;
			}
		}
	}

	.but {
		margin: 30rpx 0;
	}
</style>
